<template>
	<view>
		<!-- 票种基本信息 -->
		<view class="ticket-info">
			<view class="big-text pad-btm30">
				植物园大门
			</view>
			<view class="use-time">
				<view class="middle-text">
					使用日期
				</view>
				<view class="use-time-box">
					<view v-for="item in useTimeList" class="use-time-item">
						<view class="u-font-md">
							今天 04/20
						</view>
						<view class="price">
							￥30
						</view>
					</view>
					<view class="in-active">
						<view class="u-font-md">
							今天 04/20
						</view>
						<view class="price">
							￥30
						</view>
					</view>
					<view class="moreDate">更多日期</view>
				</view>
			</view>
			<view class="ticket-number">
				<view class="middle-text">购票数量</view>
				<view>
					<template>
						<u-number-box bg-color="#178975" color="#fff" :input-height="50" :input-width="201" :min="0"
							v-model="ticketNumber" @change="ticketNumberChange"></u-number-box>
					</template>
				</view>
			</view>
		</view>
		<view class="gap"></view>
		<!-- 游客信息 -->
		<view class="visitor-info">
			<view class="u-flex visitor-info-title">
				<view class="u-flex">
					<view class="big-text pad-btm30">游客信息</view>
					<view class="small-text pad-btm30">（已填写1位）</view>
				</view>
				<view class="u-flex">
					<view class="small-text sub-button" @click="addContactPerson">新增</view>
					<view class="button-gap"> | </view>
					<view class="small-text sub-button" @click="selectContactPerson">选择</view>
				</view>
			</view>
			<view class="visitor-info-item" v-for="(item,idx) in 3">
				<view class="middle-text pad-btm10">游客 01</view>
				<view class="small-text pad-btm10">姓名：张三</view>
				<view class="small-text pad-btm10">身份证：2819281928717182</view>
				<view class="u-flex button-delete">
					<view class="small-text">手机号：18897265129</view>
					<view>
						<u-icon name="trash-fill" color="#F02015"></u-icon>
						<u-link font-size="28" color="#F02015" href="http://www.uviewui.com" :under-line="false">删除
						</u-link>
					</view>
				</view>
				<u-line color="#e4e7ed" v-if="idx!=2" />
			</view>
		</view>
		<!-- 联系人 -->
		<view class="gap"></view>
		<view class="contact-person">
			<view class="u-flex  contact-person-title">
				<view class="big-text pad-btm30">联系人</view>
				<view class="u-flex">
					<view class="small-text sub-button">新增</view>
					<view class="button-gap"> | </view>
					<view class="small-text sub-button" >选择</view>
				</view>
			</view>
			<view class="my-form">
				<template>
					<u-form :model="form" ref="uForm" label-width="150rpx" label-align="right">
						<u-form-item label="姓名：">
							<u-input v-model="form.name" />
						</u-form-item>
						<u-form-item label="手机号：">
							<u-input v-model="form.intro" />
						</u-form-item>
						<u-form-item label="证件类型：">
							<u-input v-model="form.sex" type="select" />
						</u-form-item>
						<u-form-item label="证件号码：">
							<u-input v-model="form.intro" />
						</u-form-item>
					</u-form>
				</template>
			</view>
		</view>
		<!-- 表单 -->
		<!-- 景区logo -->
		<view>
		</view>
		<!-- 订单金额 -->
		<view class="u-flex order-submit">
			<view class="u-flex">
				<view>订单金额</view>
				<view class="order-price">￥60元</view>
			</view>
			<view>
				<u-button :custom-style="customStyle">提交订单</u-button>
			</view>
		</view>
		<view class="">
			<AddContactPerson v-model="addContactPersonFlag" :model="addContactPersonObj"></AddContactPerson>
		</view>
		<view>
			<Contacts v-model="contactsFlag" @close="toCloseContacts" @confirm="confirm" @showAdd="addContactPerson"/>
		</view>
	</view>

</template>

<script>
	import AddContactPerson from "./add-contact-person/add-contact-person.vue"
	import Contacts from "./contacts"
	export default {
		data() {
			return {
				customStyle: {
					marginTop: '30rpx', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#FFFFFF',
					background: '#178975',
					fontWeight: "500"
				},
				useTimeList: [{}, {}],
				ticketNumber: 1,
				form: {
					name: '',
					intro: '',
					sex: ''
				},
				contactsFlag: false,
				addContactPersonFlag: false,
				addContactPersonObj: {
					name: '',
					intro: '',
					sex: '',
				}
			}
		},
		components: {
			AddContactPerson,
			Contacts
		},
		methods: {
			addContactPerson(val) {
				if(val){
					this.addContactPersonObj = {
						name: val.name,
						intro:val.idNo,
						sex: val.phone
					}
					this.$nextTick(function(){
					this.addContactPersonFlag = true
					})
				}else{
					this.addContactPersonObj={
						name: "",
						intro: "",
						sex: ""
					}
					this.addContactPersonFlag = true
				}
			},
			// 选择联系人
			selectContactPerson() {
				this.contactsFlag = true
			},
			toCloseContacts(){
				this.contactsFlag = false
			},
			confirm(arr){
				console.log(arr,"选择的身份")
				this.contactsFlag = false
			},
			
			ticketNumberChange(e) {
				console.log('当前值为: ' + e.value)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gap {
		width: 100%;
		height: 20rpx;
		background: #F8F8F8;
	}

	.small-text {
		font-size: 28rpx;
		color: #838383;
		letter-spacing: 1.17px;


	}

	.middle-text {
		font-size: 32rpx;
		padding-bottom: 30rpx;
	}

	.big-text {
		font-size: 36rpx;
		font-weight: 600;

	}

	.sub-button {
		color: #178975
	}

	.pad-btm30 {
		padding-bottom: 30rpx;
	}

	.pad-btm10 {
		padding-bottom: 10rpx;
	}

	.contact-person {
		padding: 30rpx 30rpx;
		justify-content: space-between;

		.contact-person-title {
			justify-content: space-between;
		}

		.button-gap {
			padding: 0 20rpx;
			color: #178975;
		}
	}

	.visitor-info {
		padding: 30rpx 30rpx;

		.visitor-info-title {
			justify-content: space-between;
		}

		.button-gap {
			padding: 0 20rpx;
			color: #178975;
		}

		.visitor-info-item {
			padding: 30rpx 0 0 0;

			.button-delete {
				padding-bottom: 30rpx;
				padding-right: 30rpx;
				justify-content: space-between;
			}

			.devide-line {
				height: 1rpx;
				background-color: #C8C7CC;
				width: 100%;
			}
		}

	}

	.ticket-info {
		letter-spacing: 1.5px;
		padding: 40rpx 30rpx 30rpx 30rpx;
		color: #1E2221;

		.use-time {
			letter-spacing: 1.5px;

			.use-time-box {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-around;

				.in-active {
					padding-top: 20rpx;
					width: 180rpx;
					height: 120rpx;
					background: #FFFFFF;
					border: 1px solid #8A8D9A;
					border-radius: 8rpx;
					border-radius: 8rpx;
					font-size: 28rpx;
					text-align: center;

					.price {
						font-size: 36rpx;
						color: #F02015;
					}
				}

				.use-time-item {
					padding-top: 20rpx;
					width: 180rpx;
					height: 120rpx;
					background: #178975;
					border-radius: 8rpx;
					border-radius: 8rpx;
					color: #FFFFFF;
					font-size: 28rpx;
					text-align: center;

					.price {
						font-size: 36rpx;
					}

				}

			}
		}

		.moreDate {
			width: 90rpx;
			height: 120rpx;
			padding-top: 20rpx;
			text-align: center;
			background: #FFFFFF;
			border: 1px solid #8A8D9A;
			border-radius: 6px;
			border-radius: 6rpx;
			font-size: 28rpx;
			color: #838383;
			letter-spacing: 1.17rpx;
		}
	}


	.ticket-number {
		padding-top: 60rpx;
		// padding-bottom: 30rpx;
	}

	.order-submit {
		padding: 0 30rpx 60rpx;
		justify-content: space-between;

		.order-price {
			font-size: 36rpx;
			color: #F02015;
			letter-spacing: 1.5px;
		}
	}
</style>
